<template>
  <d2-container class="page">
    <el-dialog
      title="提现和账户详情"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
     <AccountDetail :inputParam="inputParam"/> 
    </el-dialog>

    <div class="row clearfix">
      <div class="col-md-3 col-sm-6 col-xs-12" @click="accountDetail">
        <div class="info-box">
          <span class="info-box-icon bg-aqua">
            <i class="fa fa-cny"></i>
          </span>
          <div class="info-box-content">
            <span class="info-box-text">账号余额 (点击提现，查看详情)</span>
            <span class="info-box-number">{{ balance.balance }}</span>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-red">
            <i class="fa fa-truck"></i>
          </span>
          <div class="info-box-content">
            <span class="info-box-text">已发货订单数</span>
            <span class="info-box-number">{{ yifh }}</span>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-green">
            <i class="fa fa-send"></i>
          </span>

          <div class="info-box-content">
            <span class="info-box-text">待发货订单数</span>
            <span class="info-box-number">{{ daifh }}</span>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-yellow">
            <i class="fa fa-users"></i>
          </span>

          <div class="info-box-content">
            <span class="info-box-text">访客数量</span>
            <span class="info-box-number">{{ visitor }}</span>
          </div>
        </div>
      </div>
    </div>

    <div style="width:640px; padding-top:100px">
      <h3>店铺信息</h3>
      <p>
        <img :src="qrImg" width="50%" />
      </p>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="店铺ID">
          <el-input v-model="form.id" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="form.shopName"></el-input>
        </el-form-item>
        <el-form-item label="实体店地址">
          <el-input v-model="form.shopAddress"></el-input>
        </el-form-item>
        <el-form-item label="店主电话">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="店铺介绍">
          <el-input
            type="textarea"
            v-model="form.brandIntroduction"
            rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateShop">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-divider></el-divider>

    <div style="width:1024px;">
      <h3>退换货规则</h3>
      <el-dialog
        width="480px"
        :title="createOrEdit"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form :model="form" ref="form">
          <el-form-item
            label="换货(天)"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="form.returnedDay"></el-input>
          </el-form-item>
          <el-form-item
            label="退货(天)"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="form.exchangeDay"></el-input>
          </el-form-item>
          <el-form-item label="全店默认" :label-width="formLabelWidth">
            <el-switch
              v-model="form.isDefault"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCreateNew('form')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-button type="primary" size="mini" @click="showCreateDlg('form')"
        >新建</el-button
      >
      <el-divider></el-divider>
      <el-table
        stripe
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
        <el-table-column label="ID" width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="最多几天换货">
          <template slot-scope="scope">{{ scope.row.returnedDay }}</template>
        </el-table-column>
        <el-table-column label="最多几天退货">
          <template slot-scope="scope">{{ scope.row.exchangeDay }}</template>
        </el-table-column>
        <el-table-column label="是否全店默认">
          <template slot-scope="scope">{{ scope.row.isDefault }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showEditDlg(scope.row)"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <div style="width:640px; padding-top:100px">
      <h3>运费设置</h3>
      <el-form ref="form" :model="form2" label-width="100px">
        <el-form-item label="运费">
          <el-input v-model="form2.fee"></el-input>
        </el-form-item>
        <el-form-item label="满多少免运费">
          <el-input v-model="form2.fullFee"></el-input>
        </el-form-item>
        <el-form-item label="运费说明">
          <el-input type="textarea" v-model="form2.info"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateYunf">保存</el-button>
        </el-form-item>
      </el-form>
    </div> -->
  </d2-container>
</template>

<script>
import * as order from "@/api/shop.order";
import * as base from "@/api/shop.base";
import * as membership from "@/api/shop.membership";
import account from "../../../store/modules/d2admin/modules/account";
import AccountDetail from "./accountDetail"

export default {
  components: {
    AccountDetail
  },
  data() {
    return {
      inputParam: {},
      dialogVisible: false,
      qrImg: null,
      visitor: 0,
      form: {},
      form2: {},
      balance: {},
      yifh: null,
      daifh: null,
      huiys: null,
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      formLabelWidth: "100px",
      dialogVisible: false,
      createOrEdit: "",
      listQuery: {
        isAsc: "desc",
        pageNum: 1,
        pageSize: 25
      }
    };
  },
  mounted() {
    base.getShopInfo().then(resp => {
      this.form = resp.data;

      base
        .shopQrImage({
          shopId: resp.data.id,
          url: "pages/loading/index",
          appId: "wx9308044613fae7f8"
        })
        .then(resp => {
          this.qrImg = resp.data;
        });
    });

    base.getBalance().then(resp => {
      this.balance = resp.data;
      this.inputParam.withdrawable = resp.data.withdrawable
    });

    order
      .fetchList({ pageStart: 1, pageSize: 1, status: "6,71" })
      .then(resp => {
        this.yifh = resp.data.totalCount;
      });

    order
      .fetchList({ pageStart: 1, pageSize: 1, status: "3,4,5" })
      .then(resp => {
        this.daifh = resp.data.totalCount;
      });

    // membership.fetchList({ pageStart: 1, pageSize: 25 }).then(response => {
    //   if (response.success) {
    //     this.huiys = response.data.totalCount;
    //   }
    // });

    base.getVisitorList().then(resp => {
      console.log(resp);
      this.visitor = resp.data.length;
    });

    // base.getFreight().then(response => {
    //   if (response.success) {
    //     this.form2 = response.data;
    //   }
    // });

    this.getList();
  },
  methods: {
    accountDetail() {
      this.dialogVisible = true;
    },

    updateYunf() {
      base.saveFreight(this.form2).then(resp => {
        if (resp.success) {
          this.$notify({
            title: "提示",
            message: "操作成功",
            type: "success",
            duration: 2000
          });
        }
      });
    },
    updateShop() {
      base.updateShop(this.form).then(resp => {
        if (resp.success) {
          this.$notify({
            title: "提示",
            message: "操作成功",
            type: "success",
            duration: 2000
          });
        }
      });
    },

    showCreateDlg(formName) {
      this.dialogFormVisible = true;
      this.createOrEdit = "新建";
      // this.$refs[formName].resetFields();
      this.form = {};
    },

    showEditDlg(row) {
      this.dialogFormVisible = true;
      this.createOrEdit = "编辑";
      this.form = row;
    },

    handleCreateNew(formName) {
      let that = this;

      const set = that.$refs;
      set[formName].validate(valid => {
        if (valid) {
          base.tuihhgz_createOrEdit(that.form).then(resp => {
            if (resp.success) {
              that.dialogFormVisible = false;
              that.getList();
              that.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
                duration: 2000
              });
            }
          });
        } else {
          return false;
        }
      });
    },

    getList() {
      base.tuihhgzList(this.listQuery).then(response => {
        if (response.success) this.tableData = response.data;
      });
    },

    handleDelete(row) {
      this.$confirm("确认删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        base
          .tuihhgz_del(row.id)
          .then(() => {
            this.getList();
            this.$notify({
              title: "提示",
              message: "操作成功",
              type: "success",
              duration: 2000
            });
          })
          .catch(() => {
            this.$notify({
              title: "提示",
              message: "操作失败",
              type: "error",
              duration: 2000
            });
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-md-3 {
  width: 25%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.info-box {
  display: block;
  min-height: 90px;
  background: #fff;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin-bottom: 15px;
}
.info-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 90px;
  width: 90px;
  text-align: center;
  font-size: 45px;
  line-height: 90px;
  background: rgba(0, 0, 0, 0.2);
}

.info-box-icon i {
  font-size: 50px;
  color: #fff;
  font-weight: normal;
}

.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
  background-color: #00c0ef !important;
}
.bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
  background-color: #dd4b39 !important;
}
.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
  background-color: #00a65a !important;
}
.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
  background-color: #f39c12 !important;
}
.info-box-content {
  text-align: left;
  padding: 5px 10px;
  margin-left: 90px;
}
.info-box-text {
  text-transform: uppercase;
}
.progress-description,
.info-box-text {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-box-number {
  display: block;
  font-weight: bold;
  font-size: 18px;
}
</style>
